<template>
    <Panel title="照明设备列表" width="380px">
      <div class="table-container">
          <div class="status">
              <div class="danger"><span></span>报警</div>
              <div class="warning"><span></span>故障</div>
              <div class="success"><span></span>正常</div>
              <div class="info"><span></span>离线</div>
          </div>
        <el-table
          :data="deviceList"
          style="width: 100%"
          class="table"
          :row-class-name="rowClass"
          header-row-class-name="table"
          header-cell-class-name="table">
          <el-table-column type="selection" width="26" />
          <el-table-column prop="name" label="名称" width="80" />
          <el-table-column prop="code" label="编号" width="74" />
          <el-table-column prop="area" label="区域" width="72" />
          <el-table-column prop="status" label="开关" width="64">
            <template #default="scope">
              <el-switch v-model="scope.row.enable" />
            </template>
          </el-table-column>
          <el-table-column prop="id" label="定位" width="60">
            <template #default="scope">
              <Icon name="map-filling" :size="18"></Icon>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </Panel>
  </template>
  
  <script lang="ts" setup>
  
  function rowClass(target) {
    switch (target.row.status) {
      case "正常":
        return "row-success";
      case "报警":
        return "row-danger";
      case "故障":
        return "row-warning";
      default:
        return "row-info";
    }
  }
  const deviceList = ref([
    { id: "1", img: "img", name: "一楼大门", code: "A00101", area: "1楼a区", status: "正常", enable: true },
    { id: "2", img: "img", name: "一楼大门", code: "A00101", area: "1楼b区", status: "正常", enable: false },
    { id: "3", img: "img", name: "一楼大门", code: "A00101", area: "1楼c区", status: "报警", enable: true },
    { id: "4", img: "img", name: "一楼大门", code: "A00101", area: "1楼d区", status: "正常", enable: true },
    { id: "5", img: "img", name: "一楼大门", code: "A00101", area: "1楼e区", status: "故障", enable: false },
    { id: "5", img: "img", name: "一楼大门", code: "A00101", area: "1楼e区", status: "离线", enable: true },
    { id: "5", img: "img", name: "一楼大门", code: "A00101", area: "1楼e区", status: "离线", enable: false },
  ]);
  
  onMounted(() => {
  
  });
  </script>
  <style lang="scss" scoped>
  .table-container {
    :deep(.el-table) {
      background-color: transparent;
  
      .cell {
        display: flex;
        align-items: center;
      }
      tr {
        position: relative;
        background-color: transparent;
      }
      th.el-table__cell {
        background-color: transparent;
        color: #fff;
      }
      td.el-table__cell {
        border-bottom: none;
        margin-bottom: 4px;
      }
      td:first-child::before {
        content: "";
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
      }
    }
    :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
      background-color: transparent;
    }
    :deep(.el-table__body) {
      border-spacing: 0px 12px;
      color: #fff;
    }
    :deep(.el-table__inner-wrapper) {
      &::before {
        display: none;
      }
    }
  
    :deep(.row-success) {
      background: linear-gradient(90deg, #29ec7840 2%, rgba(41, 236, 120, 0) 99%);
      & td:first-child::before {
        background-color: #29ec78;
      }
    }
    :deep(.row-warning) {
      background: linear-gradient(90deg, #fe8d3b40 2%, rgba(254, 141, 59, 0) 99%);
      & td:first-child::before {
        background-color: #fe8d3b;
      }
    }
    :deep(.row-danger) {
      background: linear-gradient(90deg, #ff000040 2%, rgba(255, 0, 0, 0) 99%);
      & td:first-child::before {
        background-color: #ff0000;
      }
    }
    :deep(.row-info) {
      background: linear-gradient(90deg, #89898940 2%, rgba(137, 137, 137, 0) 99%);
      & td:first-child::before {
        background-color: #898989;
      }
    }
  
    .chart {
      width: 100%;
      height: 260px;
    }
  }
  
  .status{
      display: flex;
      flex-direction: row;
      gap: 16px;
      margin: 16px 0px;
  }
  .success,.warning,.danger,.info{
      display: flex;
      align-items: center;
      gap: 8px;
      color: #fff;
      span{
          display: inline-block;
          width: 12px;
          height: 12px;
      }
  }
  .success span{
      background-color: var(--success-color);
  }
  
  .warning span{
      background-color: var(--warning-color);
  }
  .danger span{
      background-color: var(--danger-color);
  }
  .info span{
      background-color: var(--info-color);
  }
  
  </style>
  